<template>
  <div class="common_width dm_userCenter">
    <TableTitle title="用户中心">
      <div>
        （
        <span
          :class="componentName == 'PersonInfo' ? 'active' : ''"
          @click="changeComponent('PersonInfo')"
          >个人资料</span
        >|
        <span
          :class="componentName == 'LoginPwd' ? 'active' : ''"
          @click="changeComponent('LoginPwd')"
          >修改登录密码</span
        >|
        <span
          :class="componentName == 'Address' ? 'active' : ''"
          @click="changeComponent('Address')"
          >收货地址</span
        >）
      </div>
    </TableTitle>
    <div class="dm_userCenter__content">
      <component :is="componentName" @phone="setPhone($event)" :phone = "phone"></component>
    </div>
  </div>
</template>

<script>
// 个人资料
import PersonInfo from "@/components/userCenter/personInfo.vue";
// 修改登录密码
import LoginPwd from "@/components/userCenter/loginPwd.vue";
// 收货地址
import Address from "@/components/userCenter/address.vue";

export default {
  components: {
    PersonInfo,
    LoginPwd,
    Address
  },
  data() {
    return {
      tableData: [],
      componentName: "PersonInfo",
      phone: ""
    };
  },
  methods: {
    // 动态切换组件
    changeComponent(_this) {
      this.componentName = _this;
    },
    // 将手机号传给修改登录密码栏
    setPhone(res) {
      this.phone = res;
      console.log("将手机号传给修改登录密码栏"+this.phone);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/userCenter/index.scss";
</style>
